<template>
  <!--默认的轮播-->
    <div>
        <div class="search-bar">
              <van-row >
                <van-col span="3">
                   <img :src="locationcIcon" width="80%" class="location-icon">
                </van-col>
                <van-col span="16">
                      <input type="text" class="search-input">
                </van-col>
                <van-col span="5">
                      <van-button size="mini">查找</van-button>
                </van-col>
              </van-row>
        </div>
       <!--swiper area-->
        <div class="swiper-area">
               <van-swipe :autoplay="1000">
                     <van-swipe-item v-for="(banner,index) in bannerPicArray" :key="index">
                       <img v-lazy="banner.image" width="100%"/>
                     </van-swipe-item>
               </van-swipe>
        </div>
      <!--type bar-->
         <div class="type-bar">
               <div v-for="(cate,index) in category" :key="index">
                   <img v-lazy="cate.image" width="90%">
                    <span>{{cate.mallCategoryName}}</span>
               </div>
         </div>

      <!--adbanner area-->
      <div>
          <img v-lazy="adBanner" width="100%">
      </div>
      <!--Recommend goods area-->
       <div class="recommend-area">
          <div class="recommend-title">
              商品推荐
          </div>
           <div class="recommend-body">
                <swiper :options="swiperOption">
                     <swiper-slide v-for="(item,index) in recommendGoods" :key="index">
                           <div class="recommend-item">
                                   <img :src="item.image" width="80%">
                                   <div>{{item.goodsName}}</div>
                                   <div>¥{{item.price|moneyFilter}}</div>
                           </div>
                     </swiper-slide>
                </swiper>
           </div>
       </div>

      <floorComponent :floorData="floor1" :floorTitle="floorName.floor1"></floorComponent>
      <floorComponent :floorData="floor2" :floorTitle="floorName.floor2"></floorComponent>
      <floorComponent :floorData="floor3" :floorTitle="floorName.floor3"></floorComponent>
    <!--  <swiperDefault>
      </swiperDefault>
      <swiperDefault2>
      </swiperDefault2>
      <swiperDefault3>
      </swiperDefault3>
      <swiperTest></swiperTest>-->

      <div class="hot-area">
        <div class="hot-title">热卖商品</div>
        <div class="hot-goods">
          <!--这里需要一个list组件-->
             <van-list>
                  <van-row gutter="20">
                        <van-col span="12" v-for="(item,index) in hitGoods" :key="index">
                             <goods-info :goodsId="item.goodsId" :goodsImage="item.image" :goodsName="item.name" :goodsPrice="item.price"></goods-info>
                        </van-col>
                  </van-row>
             </van-list>
        </div>
      </div>
    </div>
</template>

<script>
  import axios from 'axios';
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import { toMoney } from '@/filter/moneyFilter.js'
/*  import  swiperDefault from '../swiper/swiperDefault'
  import  swiperDefault2 from '../swiper/swiperDefault2'
  import  swiperDefault3 from '../swiper/swiperDefault3'
  import  swiperTest from '../swiper/swiperTest'*/
  import  floorComponent from '../component/floorComponent'
  import goodsInfo from '../component/goodsInfoComponent' //热卖组件

  import url from '@/serviceAPI.config.js'
    export default {
        components: {
          swiper,
          swiperSlide,
          goodsInfo,
       /*   swiperDefault,
          swiperDefault2,
          swiperDefault3,
          swiperTest,*/
          floorComponent
        },
        name: "ShoppingMail",
        data(){
          return{
            swiperOption:{
                 slidesPerView:3
            },
            msg:'shopping Mail',
            locationcIcon:require('../../assets/images/location.png'),
            bannerPicArray:[],
            category:[],
            adBanner:'',//广告条
            recommendGoods:[],
            floor1:[],
            floor2:[],
            floor3:[],
            floor1_0:{},
            floor1_1:{},
            floor1_2:{},
            floorName:{},
            hitGoods:[]//热卖商品
          }
        },
         filters:{
             moneyFilter(money){
               return toMoney(money)
             }
         },
        created(){
           axios({
             url:url.getShopingMailInfo,
             method:'get',
           }).then(response=>{
                  console.log(response)
                  if(response.status==200){
                      this.category=response.data.data.category;
                      this.adBanner=response.data.data.advertesPicture.PICTURE_ADDRESS;//广告条
                      this.bannerPicArray=response.data.data.slides;//轮播
                       this.recommendGoods=response.data.data.recommend;
                       this.floor1=response.data.data.floor1;
                       this.floor2=response.data.data.floor2;
                       this.floor3=response.data.data.floor3;
                       this.floor1_0=this.floor1[0];
                       this.floor1_1=this.floor1[1];
                       this.floor1_2=this.floor1[2];
                       this.floorName=response.data.data.floorName;
                       this.hitGoods=response.data.data.hotGoods;
                  }
             }).catch(error=>{
                  console.log(error)
           })
        }
    }
</script>

<style scoped>

 .search-bar{
      height: 2.2rem;
      background-color: #e5017d;
      line-height: 2.2rem;
      overflow: hidden;
 }
  .search-input{
       width: 100%;
       height: 1.3rem;
       border-top: 0px;
       border-right: 0px;
       border-bottom: 1px solid #fff !important;
       background-color: #e5017d;
       color: #fff;
  }
  .location-icon{
      padding-top: .2rem;
      padding-left: .3rem;
  }
  .swiper-area{
    clear:both;
    max-height: 15rem;
    overflow: hidden;
  }

 .type-bar{
   background-color: #fff;
   margin: 0 .3rem .3rem .3rem;
   border-radius: .3rem;
   font-size: 14px;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
 }

 .type-bar div{
     padding: .3rem;
     font-size: 12px;
     text-align: center;
     flex: 1;
 }
  .recommend-area{
    background-color: #fff;
    margin-top: .3rem;
  }
  .recommend-title{
      border-bottom: 1px solid #eee;
      font-size: 14px;
      padding: .2rem;
      color: #e5017d;
  }

  .recommend-body{
      border-bottom: 1px solid  #eee;
  }
  .recommend-item{
      width: 99%;
      border-right: 1px solid #eee;
    font-size: 12px;
    text-align: center;
  }
.floor_anomaly{
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

 .floor_anomaly div{
    width: 10rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
 }
  .floor-one{
    border-right:1px solid #ddd;
  }
 .floor-two{
   border-bottom:1px solid #ddd;
 }

  .floor-rule{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      background-color: #fff;
  }
  .floor-rule div{
      -webkit-box-sizing: border-box;
       box-sizing: border-box;
       width: 10rem;
       border-bottom: 1px solid #ddd;
  }
  .floor-rule div:nth-child(odd){
       border-right:1px solid #ddd;
  }

 .hot-area{
   text-align: center;
   font-size:14px;
   height: 1.8rem;
   line-height:1.8rem;
 }

 .hot-goods{
   height: 130rem;
   overflow: hidden;
   background-color: #fff;
 }
</style>
